<template>
  <el-dialog
    v-model="visible"
    :title="$t('shop.shopType')"
    :close-on-click-modal="false"
    width="700px"
  >
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      :rules="dataRule"
      :label-width="$t('language') === 'language' ? '160px' : '100px'"
      style="width:500px;"
      @submit.prevent
      @keyup.enter="onSubmit()"
    >
      <!-- 商城类型 -->
      <el-form-item
        :label="$t('shop.shopType')"
        prop="type"
        style="width:500px;"
      >
        <el-radio-group v-model="dataForm.type">
          <el-radio :label="0">
            {{ $t('shop.generalStore') }}
          </el-radio>
          <el-radio :label="1">
            {{ $t('shop.preferredStores') }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div
        class="dialog-footer"
      >
        <div
          class="default-btn"
          @click="visible = false"
        >
          {{ $t('remindPop.cancel') }}
        </div>
        <div
          class="default-btn primary-btn"
          @click="onSubmit()"
        >
          {{ $t('remindPop.confirm') }}
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const emit = defineEmits(['refreshDataList'])

const dataForm = reactive({
  shopIds: 0,
  mobile: '',
  type: 0
})
const dataRule = {}

const visible = ref(false)
const dataFormRef = ref(null)
const init = (ids) => {
  visible.value = true
  nextTick(() => {
    dataFormRef.value?.resetFields()
    dataFormRef.value?.resetFields()
    dataForm.type = 0
  })
  dataForm.shopIds = ids
}

// 表单提交
const onSubmit = () => {
  dataFormRef.value?.validate((valid) => {
    if (valid) {
      http({
        url: http.adornUrl('/shop/shopAuditing/updateShopType'),
        method: 'put',
        data: http.adornData({
          shopIds: dataForm.shopIds,
          type: dataForm.type
        })
      }).then(() => {
        ElMessage({
          message: $t('publics.operation'),
          type: 'success',
          duration: 1500,
          onClose: () => {
            visible.value = false
            emit('refreshDataList')
          }
        })
      })
    }
  })
}
const message = (msg) => {
  ElMessage({
    message: msg,
    type: 'error',
    duration: 1500
  })
}

defineExpose({
  init,
  message
})

</script>
